<template>
    <main class="container p-4">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 文章数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center h-full w-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1699865769161" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6627" width="200" height="200">
                        <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="6628"></path>
                        <path
                            d="M682.666667 341.333333a136.533333 136.533333 0 0 1 273.066666 0v546.133334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V341.333333z"
                            fill="#FFAA44" p-id="6629"></path>
                        <path
                            d="M68.266667 819.2a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a68.266667 68.266667 0 0 1-68.266667-68.266666V204.8a136.533333 136.533333 0 0 0-136.533333-136.533333H204.8a136.533333 136.533333 0 0 0-136.533333 136.533333v614.4z"
                            fill="#FF7744" p-id="6630"></path>
                        <path
                            d="M187.733333 273.066667A51.2 51.2 0 0 1 238.933333 221.866667h68.266667a51.2 51.2 0 1 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 273.066667z m0 204.8A51.2 51.2 0 0 1 238.933333 426.666667h409.6a51.2 51.2 0 0 1 0 102.4H238.933333A51.2 51.2 0 0 1 187.733333 477.866667zM238.933333 631.466667a51.2 51.2 0 0 0 0 102.4h204.8a51.2 51.2 0 0 0 0-102.4H238.933333z"
                            fill="#FFFFFF" p-id="6631"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">文章</h2>
                        <CountTo :value="articleTotalCount" customClass="font-bold text-2xl"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 分类数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center h-full w-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1699866300645" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="15660" width="200" height="200">
                        <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF822B" p-id="15661">
                        </path>
                        <path
                            d="M324.408781 655.018925C505.290126 655.018925 651.918244 508.387706 651.918244 327.509463c0-152.138029-103.733293-280.047334-244.329811-316.853972C205.813923 52.463528 47.497011 213.017581 8.987325 415.981977 47.587706 553.880127 174.183098 655.018925 324.408781 655.018925z"
                            fill="#FFFFFF" fill-opacity=".2" p-id="15662"></path>
                        <path
                            d="M512 1024c282.766631 0 512-229.233369 512-512 0-31.765705-2.891385-62.853911-8.433853-93.018889C928.057169 336.0999 809.874701 285.26268 679.824375 285.26268c-269.711213 0-488.357305 218.645317-488.357305 488.357305 0 54.959576 9.084221 107.802937 25.822474 157.10377C300.626556 989.489417 402.283167 1024 512 1024z"
                            fill="#FFFFFF" fill-opacity=".15" p-id="15663"></path>
                        <path
                            d="M732.535958 756.566238c36.389596 0 65.889478-29.499882 65.889477-65.889478 0 36.389596 29.502983 65.889478 65.889478 65.889478-17.053747 0-65.889478 29.502983-65.889478 65.889477 0-36.386495-29.499882-65.889478-65.889477-65.889477zM159.685087 247.279334c25.686819 0 46.51022-20.8234 46.51022-46.51022 0 25.686819 20.8234 46.51022 46.510219 46.51022-12.03607 0-46.51022 20.8234-46.510219 46.510219 0-25.686819-20.8234-46.51022-46.51022-46.510219z"
                            fill="#FFFFFF" fill-opacity=".5" p-id="15664"></path>
                        <path
                            d="M206.195307 333.32324c8.562531 0 15.503407-6.940875 15.503406-15.503407 0 8.562531 6.940875 15.503407 15.503407 15.503407-4.012282 0-15.503407 6.940875-15.503407 15.503406 0-8.562531-6.940875-15.503407-15.503406-15.503406z"
                            fill="#FFFFFF" fill-opacity=".3" p-id="15665"></path>
                        <path
                            d="M536.641889 258.131718m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587434l0 116.046099q0 56.587434-56.587433 56.587433l-116.046099 0q-56.587434 0-56.587434-56.587433l0-116.046099q0-56.587434 56.587434-56.587434Z"
                            fill="#FFFFFF" p-id="15666"></path>
                        <path
                            d="M536.641889 536.647316m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587433l0 116.046099q0 56.587434-56.587433 56.587434l-116.046099 0q-56.587434 0-56.587434-56.587434l0-116.046099q0-56.587434 56.587434-56.587433Z"
                            fill="#FFFFFF" p-id="15667"></path>
                        <path
                            d="M258.131718 536.647316m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587433l0 116.046099q0 56.587434-56.587433 56.587434l-116.046099 0q-56.587434 0-56.587434-56.587434l0-116.046099q0-56.587434 56.587434-56.587433Z"
                            fill="#FFFFFF" p-id="15668"></path>
                        <path
                            d="M258.131718 258.131718m56.587434 0l116.046099 0q56.587434 0 56.587433 56.587434l0 116.046099q0 56.587434-56.587433 56.587433l-116.046099 0q-56.587434 0-56.587434-56.587433l0-116.046099q0-56.587434 56.587434-56.587434Z"
                            fill="#FFFFFF" p-id="15669"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">分类</h2>
                        <CountTo :value="categoryTotalCount" customClass="font-bold text-2xl"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 标签数 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center h-full w-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1699866473165" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="27760" width="200" height="200">
                        <path
                            d="M1023.910943 511.999898c5.11911 317.794367-194.116663 516.825376-511.91103 511.911029-317.794367 4.914346-516.825376-194.116663-511.91103-511.911029C-4.825463 194.20553 194.205546-4.825478 511.999913 0.088868c317.794367-4.914346 516.825376 194.116663 511.91103 511.91103z"
                            fill="#FF5FB7" p-id="27761"></path>
                        <path
                            d="M1022.477592 566.671996C1006.915497 340.40732 852.318366 201.16752 614.382119 204.85328c-254.112635-4.095288-413.624112 155.416189-409.528824 409.528824-3.890524 237.936247 135.554041 392.533378 361.613952 408.095473 268.036615-16.381153 439.629192-187.97373 456.010345-455.805581z"
                            fill="#FF55AA" p-id="27762"></path>
                        <path
                            d="M1015.515602 629.944199C985.824762 491.523456 876.480566 407.160519 716.764325 409.617692c-190.635668-3.071466-310.218084 116.51095-307.146618 307.146618-2.457173 159.716241 81.905765 269.060437 220.121743 298.751277 211.112109-34.400421 351.375731-174.664043 385.776152-385.571388z"
                            fill="#FF4A9C" p-id="27763"></path>
                        <path
                            d="M997.701098 705.707031C964.734028 646.734881 902.076118 613.153517 819.146531 614.382104c-127.1587-2.047644-206.812056 77.605712-204.764412 204.764412-1.433351 82.929587 32.352777 145.587497 91.120163 178.554567a431.233852 431.233852 0 0 0 292.198816-291.994052z"
                            fill="#FF408E" p-id="27764"></path>
                        <path
                            d="M273.654138 828.360914L778.193649 634.858545H245.806178v174.868808a20.476441 20.476441 0 0 0 27.84796 18.633561z"
                            fill="#FFFFFF" p-id="27765"></path>
                        <path
                            d="M750.345689 828.360914L245.806178 634.858545V255.634854a61.429324 61.429324 0 0 1 61.429323-61.429324h409.528824a61.429324 61.429324 0 0 1 61.429324 61.429324v552.863912a20.476441 20.476441 0 0 1-27.84796 19.862148z"
                            fill="#FFB0E3" p-id="27766"></path>
                        <path
                            d="M368.664825 276.111295m30.714661 0l225.240854 0q30.714662 0 30.714661 30.714662l0 0q0 30.714662-30.714661 30.714662l-225.240854 0q-30.714662 0-30.714661-30.714662l0 0q0-30.714662 30.714661-30.714662Z"
                            fill="#FFFFFF" p-id="27767"></path>
                    </svg>
                    <div class="ml-5">
                        <h2 class="mb-1">标签</h2>
                        <CountTo :value="tagTotalCount" customClass="font-bold text-2xl"></CountTo>
                    </div>
                </div>
            </div>

            <!-- 总浏览量 -->
            <div class="col-span-4 md:col-span-1">
                <!-- 卡片 -->
                <div
                    class="flex items-center h-full w-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <svg t="1699866701804" class="icon w-10 h-10" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="37369" width="200" height="200">
                        <path
                            d="M365.3 921.9c-39.7 0-72.2-32.5-72.2-72.2v-591c0-39.7 32.5-72.2 72.2-72.2h459.5c39.7 0 72.2 32.5 72.2 72.2v590.5c0 39.7-32.5 72.2-72.2 72.2H365.3v0.5z"
                            fill="#FFBA40" p-id="37370"></path>
                        <path
                            d="M824.8 209c27.3 0 50.2 22.5 50.2 50.2v590.5c0 27.3-22.5 50.2-50.2 50.2H365.3c-27.3 0-50.2-22.5-50.2-50.2v-591c0-27.3 22.5-50.2 50.2-50.2h459.5m0-44.5H365.3c-52.1 0-94.7 42.6-94.7 94.7v590.5c0 52.1 42.6 94.7 94.7 94.7h459.5c52.1 0 94.7-42.6 94.7-94.7V258.7c0.4-52.1-42.1-94.7-94.7-94.7z"
                        fill="#333333" p-id="37371"></path>
                    <path
                        d="M365.3 839.1c-39.7 0-72.2-32.5-72.2-72.2V176c0-39.7 32.5-72.2 72.2-72.2h459.5c39.7 0 72.2 32.5 72.2 72.2v590.5c0 39.7-32.5 72.2-72.2 72.2H365.3v0.4z"
                        fill="#FFBA40" p-id="37372"></path>
                    <path
                        d="M824.8 126.3c27.3 0 50.2 22.5 50.2 50.2V767c0 27.3-22.5 50.2-50.2 50.2H365.3c-27.3 0-50.2-22.5-50.2-50.2V176c0-27.3 22.5-50.2 50.2-50.2h459.5m0-44.5H365.3c-52.1 0-94.7 42.6-94.7 94.7v590.5c0 52.1 42.6 94.7 94.7 94.7h459.5c52.1 0 94.7-42.6 94.7-94.7V176c0.4-52.1-42.1-94.7-94.7-94.7z"
                        fill="#333333" p-id="37373"></path>
                    <path
                        d="M564.7 332.8c-5.3 0-10-1.9-14.3-5.3L498.2 284l-52.1 43.5c-4.3 3.3-9.1 5.3-14.3 5.3-3.3 0-6.7-0.5-9.6-1.9-7.6-3.8-12.9-11.5-12.9-20.1V126.3c0-12.4 10-22.5 22.5-22.5h132.9c12.4 0 22.5 10 22.5 22.5v184.1c0 8.6-5.3 16.7-12.9 20.1-2.9 1.4-6.3 2.3-9.6 2.3z"
                        fill="#27C18F" p-id="37374"></path>
                    <path
                        d="M564.7 126.3v184.1l-66.5-55.5-66.5 55.5V126.3h133m0-45h-133c-24.9 0-44.9 20.1-44.9 44.9v184.1c0 17.2 10 33 25.8 40.6 6.2 2.9 12.4 4.3 19.1 4.3 10.5 0 20.6-3.3 28.7-10.5l37.8-31.6 37.8 31.6c8.1 6.7 18.6 10.5 28.7 10.5 6.2 0 12.9-1.4 19.1-4.3 15.8-7.2 25.8-23.4 25.8-40.6v-184c0-24.9-20.1-45-44.9-45z m110.4 725.3c-12.4 0-22.5-10-22.5-22.5V486.3c0-18.6-15.3-33.9-33.9-33.9s-33.9 15.3-33.9 33.9c0 12.4-10 22.5-22.5 22.5s-22.5-10-22.5-22.5c0-43.5 35.4-78.9 78.9-78.9s78.9 35.4 78.9 78.9v297.9c0 12.4-10.1 22.4-22.5 22.4z m-553.7 0c-12.4 0-22.5-10-22.5-22.5V486.3c0-43.5 35.4-78.9 78.9-78.9s78.9 35.4 78.9 78.9c0 12.4-10 22.5-22.5 22.5s-22.5-10-22.5-22.5c0-18.6-15.3-33.9-33.9-33.9s-33.9 15.3-33.9 33.9v297.9c0 12.4-10 22.4-22.5 22.4zM461.4 797.1c-12.4 0-22.5-10-22.5-22.5 0-22.5-18.2-40.6-40.6-40.6-22.5 0-40.6 18.2-40.6 40.6 0 12.4-10 22.5-22.5 22.5-12.4 0-22.5-10-22.5-22.5 0-47.3 38.2-85.6 85.6-85.6s85.6 38.2 85.6 85.6c0 12.4-10.1 22.5-22.5 22.5z"
                        fill="#333333" p-id="37375"></path>
                    <path
                        d="M225.7 921.9C155.9 921.9 99 865 99 795.2s56.9-126.7 126.7-126.7 126.7 56.9 126.7 126.7-56.9 126.7-126.7 126.7z"
                        fill="#27C18F" p-id="37376"></path>
                    <path
                        d="M225.7 690.9c57.4 0 104.2 46.4 104.2 104.2 0 57.4-46.4 104.2-104.2 104.2S121.4 853 121.4 795.2c0-57.4 46.9-104.3 104.3-104.3m0-44.4c-82.2 0-149.2 66.9-149.2 149.2s66.9 149.2 149.2 149.2S374.9 878 374.9 795.7s-67-149.2-149.2-149.2z"
                        fill="#333333" p-id="37377"></path>
                    <path
                        d="M570.9 921.9c-69.8 0-126.7-56.9-126.7-126.7s56.9-126.7 126.7-126.7 126.7 56.9 126.7 126.7-56.9 126.7-126.7 126.7z"
                        fill="#27C18F" p-id="37378"></path>
                    <path
                        d="M570.9 690.9c57.4 0 104.2 46.4 104.2 104.2 0 57.4-46.4 104.2-104.2 104.2-57.9 0-104.2-46.4-104.2-104.2 0.4-57.3 46.8-104.2 104.2-104.2m0-44.4c-82.2 0-149.2 66.9-149.2 149.2s66.9 149.2 149.2 149.2S720.1 878 720.1 795.7s-67-149.2-149.2-149.2z"
                        fill="#333333" p-id="37379"></path>
                </svg>
                <div class="ml-5">
                    <h2 class="mb-1">总浏览量</h2>
                    <CountTo :value="pvTotalCount" customClass="font-bold text-2xl"></CountTo>
                </div>
            </div>
        </div>

        <!-- 文章发布热点图 -->
        <div class="col-span-4 md:col-span-2">
            <!-- 卡片 -->
            <div
                class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
                    <!-- 日历图标 -->
                    <svg t="1699867752559" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43935" width="200" height="200"><path d="M897.9 369.2H205c-33.8 0-61.4-27.6-61.4-61.4s27.6-61.4 61.4-61.4h692.9c33.8 0 61.4 27.6 61.4 61.4s-27.6 61.4-61.4 61.4z" fill="#FFB89A" p-id="43936"></path><path d="M807 171H703.3c-16.6 0-30 13.4-30 30s13.4 30 30 30H807c31.6 0 57.4 24 57.4 53.4v42.3H125.2v-42.3c0-29.5 25.7-53.4 57.4-53.4H293c16.6 0 30-13.4 30-30s-13.4-30-30-30H182.5c-64.7 0-117.4 50.9-117.4 113.4v527.7c0 62.5 52.7 113.4 117.4 113.4H807c64.7 0 117.4-50.9 117.4-113.4V284.5c0-62.6-52.7-113.5-117.4-113.5z m0 694.6H182.5c-31.6 0-57.4-24-57.4-53.4V386.8h739.2v425.4c0.1 29.5-25.7 53.4-57.3 53.4z" fill="#45484C" p-id="43937"></path><path d="M447.6 217.1c-12.4-6.1-27-2.8-35.7 7.1-2.2-6.7-4-16.2-4-28.1 0-13 2.2-23 4.6-29.8 9.5 8.1 23.5 9.6 34.9 2.8 14.2-8.5 18.8-27 10.3-41.2-15.5-25.9-35.9-29.7-46.6-29.7-36.6 0-63.1 41.2-63.1 97.8s26.4 98 63 98c20.6 0 39-13.4 50.4-36.7 7.3-14.9 1.1-32.9-13.8-40.2zM635.9 218.5c-12.4-6.1-27-2.8-35.7 7.1-2.2-6.7-4-16.2-4-28.1 0-13 2.2-23 4.6-29.8 9.5 8.1 23.5 9.6 34.9 2.8 14.2-8.5 18.8-27 10.3-41.2-15.5-25.9-35.9-29.7-46.6-29.7-36.6 0-63.1 41.2-63.1 97.8s26.5 97.8 63.1 97.8c20.6 0 39-13.4 50.4-36.7 7.1-14.7 0.9-32.7-13.9-40z" fill="#45484C" p-id="43938"></path><path d="M700.2 514.5H200.5c-16.6 0-30 13.4-30 30s13.4 30 30 30h499.7c16.6 0 30-13.4 30-30s-13.5-30-30-30zM668.4 689.8h-74c-16.6 0-30 13.4-30 30s13.4 30 30 30h74c16.6 0 30-13.4 30-30s-13.4-30-30-30zM479.3 689.8H200.5c-16.6 0-30 13.4-30 30s13.4 30 30 30h278.8c16.6 0 30-13.4 30-30s-13.4-30-30-30z" fill="#33CC99" p-id="43939"></path></svg>
                    近半年文章发布热点图
                </h2>
               <ArticlePublishCalendar :value="articlePublishInfo"></ArticlePublishCalendar>
            </div>
        </div>

        <!-- 文章日 PV 访问量折线图 -->
        <div class="col-span-4 md:col-span-2">
            <!-- 卡片 -->
            <div
                class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
                    <!-- 折线图标 -->
                    <svg t="1699872552774" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="58226" width="200" height="200"><path d="M629.892 323.414c-6.226-11.274-18.33-18.156-31.126-17.914-12.796 0.242-24.554 7.608-30.086 19.124l-143.52 286.87-63.29-115.164c-6.224-11.032-17.982-17.914-30.432-17.914h-60.52c-19.022 0-34.584 15.494-34.584 34.584 0 19.09 15.56 34.584 34.582 34.584h40.118l85.074 155c6.226 11.276 18.33 18.158 31.126 17.916 12.796-0.242 24.554-7.608 30.086-19.124l143.52-286.87 63.29 115.164c6.224 11.032 17.982 17.914 30.432 17.914h60.52c19.022 0 34.584-15.494 34.584-34.584 0-19.09-15.56-34.584-34.582-34.584h-40.118l-85.074-155z" fill="#767BFA" p-id="58227"></path><path d="M513 98C854.684 98 928 171.248 928 513S854.684 928 513 928C171.316 928 98 854.752 98 513S171.316 98 513 98z m0 69.166c-83.692 0-146.634 4.6-194.012 15.148-46.688 10.376-74.354 25.592-92.684 43.92-18.33 18.364-33.546 46.032-43.92 92.754-10.72 47.482-15.218 110.148-15.218 194.012s4.496 146.53 15.218 194.012c10.374 46.722 25.59 74.39 43.92 92.754 18.33 18.328 45.996 33.544 92.684 43.92 47.38 10.548 110.32 15.148 194.012 15.148 83.692 0 146.634-4.6 194.012-15.148 46.688-10.376 74.354-25.592 92.684-43.92 18.328-18.364 33.546-46.032 43.92-92.754 10.72-47.482 15.218-110.148 15.218-194.012s-4.496-146.53-15.218-194.012c-10.374-46.722-25.592-74.39-43.92-92.752-18.33-18.33-45.996-33.546-92.684-43.92-47.38-10.55-110.32-15.15-194.012-15.15z" fill="#ABAFD1" p-id="58228"></path></svg>
                    近一周 PV 访问量
                </h2>
                <ArticlePVLineChat :value="articlePVInfo"></ArticlePVLineChat>
            </div>
        </div>
    </div>

</main></template>

<script setup>
import { ref } from 'vue'
import { getBaseStatisticsInfo, getPublishArticleStatisticsInfo, getArticlePVStatisticsInfo } from '@/api/admin/dashboard'
import CountTo from '@/components/CountTo.vue'
import ArticlePublishCalendar from '@/components/ArtilcePublishCalendar.vue'
import ArticlePVLineChat from '@/components/ArticlePVLineChat.vue'

// 文章总数，默认值为 0
const articleTotalCount = ref(0)
// 分类总数
const categoryTotalCount = ref(0)
// 标签总数
const tagTotalCount = ref(0)
// PV 总访问量
const pvTotalCount= ref(0)

getBaseStatisticsInfo().then(res => {
    if (res.success) {
        articleTotalCount.value = res.data.articleTotalCount
        categoryTotalCount.value = res.data.categoryTotalCount
        tagTotalCount.value = res.data.tagTotalCount
        pvTotalCount.value = res.data.pvTotalCount
    }
})

// 按日统计文章发布数据
const articlePublishInfo = ref({})
getPublishArticleStatisticsInfo().then((res) => {
    if (res.success) {
        articlePublishInfo.value = res.data
    }
})

// 近一周文章 PV 数据
const articlePVInfo = ref({})
getArticlePVStatisticsInfo().then((res) => {
    if (res.success) {
        articlePVInfo.value = res.data
    }
})

</script>